<template>
  <div>
    <!-- 顶部搜索栏 -->
    <van-search
      round
      show-action
      label="上海▼ 丨 "
      placeholder="请输入小区或地址"
      background="#4fc08d"
    >
      <template #left>
        <van-icon name="arrow-left" color="#ffffff" size="25" />
      </template>
      <template #action>
        <van-icon name="location-o" color="#ffffff" size="25" />
      </template>
    </van-search>

    <!-- 筛选栏内容 -->
    <van-dropdown-menu>
      <van-dropdown-item title="区域">
        <van-picker :columns="columns" :value-key="label" />
      </van-dropdown-item>
      <van-dropdown-item title="方式"
        ><van-picker :columns="columns1" :value-key="label"
      /></van-dropdown-item>
      <van-dropdown-item title="租金"
        ><van-picker :columns="columns2" :value-key="label"
      /></van-dropdown-item>
<van-popup
 v-model="show"
 position="right"
 :style="{ height: '100%', width: '70%' }"
 >
 <!-- 户型 -->
 <div class="fit">
 <h1 class="title">户型</h1>
 <div class="itembox">
  <span
  class="item"
  v-for="item in roomType"
  :key="item.value"
  @click="myclick($event)"
  :data-id="item.value"
  >{{ item.text }}</span
 >
<!-- <span class="item">{{ item.text }}</span> -->
</div>
<van-divider
 :style="{
  color: '#1989fa',
 borderColor: '#54b879',
  padding: '0 35px 0 50px'
 }"
  >
  </van-divider>
 </div>
 <!-- 朝向 -->
<div class="fit">
<h1 class="title">朝向</h1>
 <div class="itembox">
<span
 class="item"
 v-for="item in oriented"
 :key="item.value"
 @click="myclick($event)"
  :data-id="item.value"
  >{{ item.text }}</span
 >
 <!-- <span class="item">{{ item.text }}</span> -->
 </div>
 <van-divider
 :style="{
color: '#1989fa',
 borderColor: '#54b879',
 padding: '0 35px 0 50px'
 }"
 >
 </van-divider>
</div> <!-- 楼层 --> <div class="fit">
 <h1 class="title">楼层</h1>
 <div class="itembox">
 <span
  class="item"
  v-for="item in floor"
 :key="item.value"
 @click="myclick($event)"
 :data-id="item.value"
 >{{ item.text }}</span
  >
  <!-- <span class="item">{{ item.text }}</span> -->
 </div>
 <van-divider
  :style="{
 color: '#1989fa',
  borderColor: '#54b879',
 padding: '0 35px 0 50px'
 }"
 >
 </van-divider>
 </div>
 <!-- 房屋亮点 -->
 <div class="fit">
 <h1 class="title">房屋亮点</h1>
 <div class="itembox">
    </van-dropdown-menu>
  </div>
</template>

<script>
import { getRegion } from '@/api/find'
export default {
  name: 'find-page',
  data() {
    return {
      label: 'label',
      columns: [],
      columns1: [],
      columns2: [],
      activeIds: [1, 2],
      activeIndex: 0
    }
  },
  methods: {},
  async created() {
    const res = await getRegion()
    console.log(res)

    // 渲染区域筛选
    this.columns.push(res.body.area, res.body.subway)
    this.columns.forEach((item) => {
      item.children[0].children = [{ label: '' }]
    })

    // 渲染方式筛选
    const res1 = await getRegion()
    this.columns1 = res1.body.rentType

    // 渲染租金筛选
    const res2 = await getRegion()
    this.columns2 = res2.body.price
    console.log(res1.body.price)
  }
}
</script>

<style scoped lang="less"></style>
